<template>
  <div class="adddizhi">
    <div>
      <span>
        <span class="hongse">*</span>收货人姓名：
      </span>
      <div class="adddizhikuan">
        <input id="name" v-model="dizhishuju.name" placeholder="请输入收货人姓名" type="text" />
      </div>
    </div>
    <div>
      <span>
        <span class="hong">*</span>所在地区：
      </span>
      <span class="adddizhikuan">
        <city
          :sheng="dizhishuju.prov"
          :shi="dizhishuju.city"
          @dizhigaibian="dizhigaibian($event)"
          :qu="dizhishuju.district"
        />
      </span>
    </div>
    <div>
      <span>
        <span class="hong">*</span>详细地址：
      </span>
      <div class="adddizhikuan">
        <input
          v-model="dizhishuju.dizhixiangqing"
          placeholder="请输入用于收货物的详细地址"
          id="name"
          type="text"
        />
      </div>
    </div>
    <div>
      <span>
        <span class="hong">*</span>联系电话：
      </span>
      <span class="adddizhikuan">
        <input
          id="telphone"
          placeholder="推荐使用手机号"
          v-model="dizhishuju.phone"
          type="text"
          class="hui inleft addsiteinp"
        />
        <span class="gu">或固定电话：</span>
        <input placeholder="区号" v-model="dizhishuju.quma" class="inmid addsiteinp" type="text" />
        <span class="heng">-</span>
        <input
          placeholder="电话号码"
          v-model="dizhishuju.telephone"
          class="inright addsiteinp"
          type="text"
        />
      </span>
    </div>
    <div class="InpSub">
      <button class="submit" v-if="dizhishuju.add" @click="adddizhi">确认提交</button>
      <button class="submit" v-else @click="xiugaidizhi">确认提交</button>
    </div>
  </div>
</template>
<style  scoped>
.hongse {
  color: #ff5757;
}
.hong {
  color: red;
  margin-left: 1rem;
}
.adddizhi {
  padding-top: 1rem;
}
.adddizhi > div {
  display: flex;
  height: 1.5rem;
  padding-bottom: 1rem;
}
.adddizhikuan {
  width: 40%;
  display: flex;
}
.adddizhikuan > input {
  width: 100%;
  outline: none;
}
.adddizhikuan select {
  width: 30%;
  margin-right: 5%;
  outline: none;
}
.adddizhikuan select:last-of-type {
  margin-right: 0px;
}
.adddizhikuan .heng {
  padding: 0px 0.5rem;
}
.adddizhikuan input {
  padding: 0px;
  outline: none;
  text-indent: 0.5rem;
}
.adddizhikuan span.gu {
  white-space: nowrap;
  padding-left: 0.5rem;
}
.adddizhikuan .inleft {
  width: 76%;
}
.adddizhikuan .inmid {
  width: 20%;
}
.adddizhikuan .inright {
  width: 66%;
}
.huodejifen {
  color: #f08200;
}
.zhuticollnavxia {
  padding-top: 1rem;
}
.InpSub {
  width: 40%;
  height: 80px;
  text-align: center;
  line-height: 80px;
  margin-left: 6.5rem;
}
.InpSub button {
  width: 50%;
  height: 30px;
  border: none;
  background: #ec6a17;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}
</style>
<script>
import city from "@/components/city.vue";
import axios from "axios";
export default {
  props: ["dizhishuju"],
  data() {
    return {};
  },
  methods: {
    dizhigaibian(e) {
      this.$emit("dizhigaibian", e);
    },
    adddizhi() {
      var _this = this;
      var url = this.$store.state.url;
      var timestamp = Date.parse(new Date());
      axios.post(url + "adddizhi", [_this.dizhishuju,timestamp]).then(
        res => {
          // 成功回调
          if (res.data.code == 300) {
            alert("成功添加");
            window.console.log(res.data);
            this.$emit("dizhigengai");
          } else {
            alert("添加失败");
            this.$emit("dizhigengai");
          }
        },
        res => {
          window.console.log(res);
          alert("添加失败");
          this.$emit("dizhigengai");
          // 错误回调
        }
      );
      
    },
    xiugaidizhi() {
      var _this = this;
      var url = this.$store.state.url;
      var timestamp = Date.parse(new Date());
      axios.post(url + "xiugaidizhi", [_this.dizhishuju,timestamp]).then(
        res => {
          // 成功回调
          if (res.data.code==300) {
            window.console.log(res.data);
            alert("修改成功");
            this.$emit("dizhigengai");
          } else {
            alert("修改失败");
            this.$emit("dizhigengai");
          }
        },
        res => {
          window.console.log(res);
          alert("修改失败");
          this.$emit("dizhigengai");
          // 错误回调
        }
      );
    }
  },
  components: {
    city
  }
};
</script>
